<template>
    <div class="main">
        <div class="blank"></div>
        <div class="container">
            <div class="swiper-container-category">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(item, index) in bannerList" :key="index">
                        <img :src="item.picture[1].text">
                    </div>
                </div>

            </div>


            <div class="gamebox ">
                <div class="title ">
                    <p>【Capcom-感受动作天尊的魅力】</p>
                </div>
                <div class="content ">
                    <img src="https://img.sonkwo.cn/Fk1U906hiI8d20qx_F2So2WrS0A3?imageView2/1/w/345/h/160 " alt=" ">
                    <div class="textBox ">
                        <div class="text ">【卡普空厂商特惠】</div>
                        <div class="time ">
                            <van-count-down :time="time">
                                <template #default="timeData">
                                    <span class="block">{{ timeData.days }}</span>
                                    <span class="colon">天</span>
                                    <span class="block">{{ timeData.hours }}</span>
                                    <span class="colon">时</span>
                                    <span class="block">{{ timeData.minutes }}</span>
                                    <span class="colon">分</span>
                                    <span class="block">{{ timeData.seconds }}</span>
                                </template>
                            </van-count-down>
                        </div>
                        <div class="check_all "><span>查看全部<i>></i></span></div>
                    </div>
                </div>
                <div class="store ">
                    <router-link v-for="(item, index) in topGame" :key="index" :to="'/gameDetail?name=' + item.name"
                        class="store_item">
                        <img :src="item.img" alt=" ">
                        <p>{{ item.name }}</p>
                        <span class="onsele" v-show="item.zk != null">-{{ item.zk }}</span>
                        <span class="pri ">￥<i>{{ item.price }}</i> </span>
                        <span class="orgpri" v-show="item.zk != null">￥{{ item.oldprice }}</span>
                        <span class="status" v-html="item.status"></span>
                    </router-link>
                </div>
                <div class="title ">
                    <p>【中电博亚发行一聚】</p>
                </div>
                <div class="store ">
                    <div class="store_item" v-for="(item, index) in zhongdian" :key="index">
                        <img :src="item.skuCovers
                            .default
                            " alt=" ">
                        <p>{{ item.skuNames.default }}</p>
                        <span class="pri">￥<i>{{ item.salePrice }}</i> </span>
                    </div>
                </div>
            </div>
            <div class="hotsales ">
                <ul>
                    <li @click="getNewGame" :class="[isActive == 1 ? 'active' : '']">最新</li>
                    <li @click="PromotionGame" :class="[isActive == 2 ? 'active' : '']">促销</li>
                    <li :class="[isActive == 3 ? 'active' : '']">预售</li>
                    <li :class="[isActive == 4 ? 'active' : '']">周排行</li>
                    <li :class="[isActive == 5 ? 'active' : '']">月排行</li>
                </ul>
            </div>
            <div class="hotsalesItem ">
                <div class="store">
                    <div class="store_item" v-for="(item, index) in gameList" :key="index">
                        <img :src="item.img" alt=" ">
                        <div class="hotsalesItem_inc ">
                            <p><i class="onsele" v-if="item.zk != undefined">促销</i>{{ item.name }}</p>
                            <div class="money ">
                                <span class="pri ">￥<i>{{ item.price }}</i> </span>
                                <span class="orgpri" v-show="item.zk != null">￥{{ item.oldprice }}</span>
                                <span class="onsele" v-if="item.zk != null">{{ item.zk }}</span>
                                <span class="status" v-html="item.status"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="blank" style="height: 63.8px;"></div>

        <fotter-bar></fotter-bar>
    </div>
</template>
<style lang="scss" scoped>
.swiper-slide {
    img {
        width: 100%;
    }
}

.swiper-slide .swiper-slide-active {
    width: 345px;
    height: 134px;
}
</style>
<script>

import fotterBar from '../components/fotterBar.vue'
import Swiper from "swiper";
import { getBanner, getZhongdian, getTopGame, getNewGame, PromotionGame } from '../api/homeView';
export default {

    data() {
        return {
            time: 1722295608000 - Date.now(),//倒计时组件
            bannerList: null,//轮播图列表
            zhongdian: null,//中电游戏列表
            topGame: null,//顶部游戏列表
            gameList: null,//底部游戏列表
            isActive: 1,//

        }
    }, methods: {
        change() {
            this.$store.commit('change', false)
        }, getBanner() {
            getBanner().then(data => {
                this.bannerList = data.data[0].theme.custom_mix
            })
        },
        getZhongdian() {
            getZhongdian().then(data => {
                this.zhongdian = data.skus

            })
        }, getTopGame() {
            getTopGame().then(data => {
                this.topGame = data

            })
        },
        getNewGame() {
            this.isActive = 1
            getNewGame().then(data => {
                this.gameList = data
            })
        },
        PromotionGame() {
            this.isActive = 2
            PromotionGame().then(data => {
                this.gameList = data
            })
        }

    },
    mounted() {
        new Swiper(".swiper-container-category", {
            slidesPerView: 1,
            paginationClickable: true,
            pagination: '.swiper-pagination',
            spaceBetween: 0,
            observer: true,
            observerParents: true,
            loop: true,
        });
    }, components: {
        fotterBar
    }, created() {
        this.getBanner()
        this.getZhongdian()
        this.getTopGame()
        this.getNewGame()
    },
}
</script>